<template>
  <div class="main-intro">
    <div class="carousel">
      <div class="basic-intro">
        <h2>求租{{detailData.city}}{{detailData.arer}}{{shopType}}类商铺</h2>
        <div class="title-bottom">
          <span>更新：{{detailData.seekTime | filterTime}}</span>
          <span>查看：{{detailData.watchNum}}次</span>
        </div>
      </div>
    </div>
    <div class="puyuan_info">
      <h2 class="partstitle">基本信息</h2>
      <div class="intro-title" style="margin-top:20px;">商铺管家</div>
      <ul class="assist-intro2">
        <li>
          <span>姓名：</span>
          <b>{{detailData.seekUserName}}</b>
        </li>
        <li>
          <span>手机号：</span>
          <b style="color: #e20000;">{{detailData.seekUserPhone}}</b>
        </li>
      </ul>
      <div class="intro-title">商铺信息</div>
      <ul class="assist-intro2">
        <li>
          <span>经营业态：</span>
          <b>{{shopType}}</b>
        </li>
        <li>
          <span>期望地点：</span>
          <b>{{detailData.city}}{{detailData.arer}}</b>
        </li>
        <li>
          <span>期望面积：</span>
          <b>{{detailData.seekAcreageD}}㎡-{{detailData.seekAcreageU}}㎡</b>
        </li>
        <li>
          <span>期望租金：</span>
          <b style="color: #e20000;">{{detailData.seekRentD}}元-{{detailData.seekRentU}}元</b>
        </li>
      </ul>
      <div class="intro-title">商铺描述</div>
      <p class="intro-desc">{{detailData.seekDescribe}}</p>
    </div>
    <div class="parts">
      <h2 class="partstitle" style="margin-top:40px;">期望硬件配套</h2>
      <div class="parts-set">
        <div
          class="part-item"
          v-for="(item,index) in partlist"
          :class="{activePart: partsActive[index]}"
          :key="index"
        >
          <span class="iconfont" :class="'icon-icon'+(index+1)"></span>
          <p class="icontxt">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNum: 0,
      shopsTypesList:[],
      shopType:"",
      partsActive: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false
      ],
      partlist: [
        {
          name: "客梯"
        },
        {
          name: "货梯"
        },
        {
          name: "中央空调"
        },
        {
          name: "停车位"
        },
        {
          name: "天然气"
        },
        {
          name: "网络"
        },
        {
          name: "暖气"
        },
        {
          name: "扶梯"
        },
        {
          name: "上水"
        },
        {
          name: "下水"
        },
        {
          name: "排烟"
        },
        {
          name: "排污"
        },
        {
          name: "管煤"
        },
        {
          name: "380v"
        },
        {
          name: "可明火"
        },
        {
          name: "外摆区"
        }
      ],
      shPic: [],
      detailData:"",
      managerInfo:""
    };
  },
  filters: {
    filterTime(time) {
      /* 切割时间去除时分秒 */
      if (time) {
        let arr = time.split(" ");
        return arr[0];
      }
    }
  },
  methods: {
      getDetail () {
        this.$http.get(this.$api.getSeekShopsInfo(), {
          params: {
            seekId: this.$route.params.id
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.detailData = res.data.seekShopsInfo
            this.managerInfo = res.data.managerInfo
            this.partsToArr(res.data.seekShopsInfo.seekParts)
            this.shopType = this.shopsTypesList[res.data.seekShopsInfo.seekShopsType].name
          }
        })
      },
      getShopeTypeList () { // 商铺类型 美食餐饮
        this.$http.get(this.$api.getShopsTypes()).then(res => {
          if (res.data.code === 0) {
            this.shopsTypesList = res.data.ShopsTypes
          }
        })
      },
    partsToArr(string) {
      let arr = string.split(",");
      for (let i = 0; i < arr.length; i++) {
        this.partsActive.splice(arr[i] - 1, 1, true);
      }
    }
  },
  created() {
      this.getShopeTypeList()
    this.getDetail();
  }
};
</script>
<style scoped lang="less">
@import "../../static/font/iconfont.css";
.iconfont {
  font-size: 40px;
}
.intro-title{
    margin-bottom: 10px;
    margin-left: 40px;
    font-size: 16px;
}
.puyuan_info{
    text-align: left;
    font-size: 16px;
}
.intro-desc{
    margin-left: 70px;
}
.assist-intro2{
    margin-left: 70px;
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    li{
        padding: 10px 0;
        margin-right: 40px;
    }
}
.carousel {
  display: flex;
  text-align: left;
  justify-content: space-between;
  .basic-Img {
    width: 50%;
    img {
      width: 100%;
      //   height: 100%;
    }
  }
  .basic-intro {
    .title-bottom {
      display: flex;
      margin-top: 20px;
      color: #999;
      justify-content: space-between;
    }
    .money-ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      color: #999;
      li {
        text-align: center;
        .blodfor {
          margin-top: 10px;
        }
      }
    }
  }
}
.partstitle {
  font-size: 20px;
  margin-top: 30px;
  font-weight: normal;
}
.part-item {
  text-align: center;
  width: 140px;
  margin: 20px 0;
}
.activePart {
  color: #ff5001;
  font-weight: bolder;
}
.main-intro {
  width: 1200px;
  background: #fff;
  margin: 20px auto;
  padding: 20px;
}
.parts {
  margin-top: 20px;
  text-align: left;
  .parts-set {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
